<!DOCTYPE html>
<html>
    <head>
        <title>登陆页面</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>      
        <div class="bj" id="app-1">    
            <!-- 登陆系统 -->
            <div class="dl">
                <div class="hy">欢迎使用</div>
                <div class="xitong">系统登陆</div>
                <div class="user">用户名 
                    <!-- 用户登录 -->
                    <input class="shuruk" value="user" type="text" v-model="login">
                </div>
                <div class="pwd">密 &nbsp; 码 
                    <!-- 登录密码 -->
                    <input class="shuruk" value="pwd" type="text" v-model="pwd" >
                </div>
                 <!-- 点击事件 -->
                <div class="denglu" v-on:click="reverseMessage">                                
                     {{message}}{{login}}{{pwd}}
                </div>
            </div>
            <div class="k1"></div>
            <div class="k2"></div>
            <div class="t1">双线质量管控体</div>
            <div class="t2">力求每件产品，每个细节都尽善尽美</div>
            <div class="t3">够专业 才放心</div>
            <div class="jz1">OPDER聚造</div>
            <div class="jz2">OPDER聚造</div>
            <div class="a">
                <div class="a1">All Rights @2021 版权所有</div>
                <div>||</div>
                <div class="a2">粤ICP备18069755号</div>
            </div>
            
        </div>
    </body>
    <script>
        // 类似定义js,在登陆系统使用
        var app = new Vue({
            el: '#app-1',
            data: {
                message: '登陆',
                login:'',
                pwd:''
            },
            methods: {
                reverseMessage: function () {
                this.message = '登陆成功' 
                this.login = ''
                this.pwd = ''
                    }
                }
        })
    </script>
</html>